<template>
  <div class="app-container">
    <!-- <div style="padding-bottom: 6px;margin: -25px 15px 0px 15px;border-bottom: 6px solid #eee;">
      <h2 style="font-weight: bold;margin-bottom: 3px;">常用功能</h2>
      <div class="header">
        <img src="../../assets/images/产值录入.png" alt @click="$router.push('/sc/fillTable')"
          v-hasPermi="['sc:fillTable:list']" draggable="false" />
        <img src="../../assets/images/成本录入.png" alt @click="$router.push('/tc/bsCost')" v-hasPermi="['tc:bsCost:list']"
          draggable="false" />
        <img src="../../assets/images/签证变更.png" alt @click="$router.push('/tc/bsSign')" v-hasPermi="['tc:bsSign:list']"
          draggable="false" />
        <img src="../../assets/images/对下结算.png" alt @click="$router.push('/tc/bsSettle')"
          v-hasPermi="['tc:bsSettle:list']" draggable="false" />
      </div>
    </div> -->
    <div class="top-border">
      <div class="li-title">常用功能</div>
      <div class="common-border">
        <router-link v-for="(item, index) in commonList" :key="item" :to="item.url">
          <div class="common-title">
            <span>{{ item.name }}</span>
            <span class="common-icon iconfont" :class="item.icon"></span>
          </div>
        </router-link>
      </div>
    </div>
    <div style="margin: 0 15px;">
      <!-- min-height: 729px; -->
      <h2 style="font-weight: bold;margin: 10px 0 3px 0;">我的工作</h2>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 我的待办 -->
        <el-tab-pane label="我的待办" name="todo">
          <button slot="label" v-hasPermi="['workflow:process:todoList']"
            style="padding: 5px 10px;background: rgb(243, 249, 255);color: rgb(80, 80, 240);border: 1px solid rgb(38, 38, 173)">
            <i class="el-icon-circle-check"></i> 我的待办
          </button>
          <todo ref="todoRef"></todo>
        </el-tab-pane>
        <!-- 我的已办 -->
        <el-tab-pane label="我的已办" name="finished">
          <button slot="label" v-hasPermi="['workflow:process:finishedList']"
            style="padding: 5px 10px;background: rgb(243, 249, 255);color: rgb(80, 80, 240);border: 1px solid rgb(38, 38, 173)">
            <i class="el-icon-time"></i> 我的已办
          </button>
          <finished ref="finishedRef"></finished>
        </el-tab-pane>
        <!-- 我发起的 -->
        <el-tab-pane label="我发起的" name="own">
          <button slot="label" v-hasPermi="['workflow:process:ownList']"
            style="padding: 5px 10px;background: rgb(243, 249, 255);color: rgb(80, 80, 240);border: 1px solid rgb(38, 38, 173)">
            <i class="el-icon-user"></i> 我发起的
          </button>
          <own ref="ownRef"></own>
        </el-tab-pane>
        <!-- 抄送我的 -->
        <el-tab-pane label="抄送我的" name="copy">
          <button slot="label" v-hasPermi="['workflow:process:copyList']"
            style="padding: 5px 10px;background: rgb(243, 249, 255);color: rgb(80, 80, 240);border: 1px solid rgb(38, 38, 173)">
            <i class="el-icon-document"></i> 抄送我的
          </button>
          <copy ref="copyRef"></copy>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import todo from './todo.vue';
import finished from './finished.vue';
import own from './own.vue';
import copy from './copy.vue';

export default {
  components: { todo, finished, own, copy },
  data () {
    return {
      activeName: 'todo',
      commonList: [
        {
          name: "试验任务", icon: "icon-shiyantaizhang1", url: '/syrw/bsDataReport'
        },
        { name: "表单打印", icon: "icon-caidanbiaodandayin", url: 'syrw/biExcelType' },
        { name: "进场台账", icon: "icon-cailiaotaizhang", url: '/ycl/bsJctz' },
        { name: "试验台账", icon: "icon-shiyanrenwuguanli", url: '/statistics/sytz' },
      ],
    };
  },
  created () {
    this.handleClick();
  },
  methods: {
    handleClick () {
      this.$nextTick(() => {
        console.log(this.activeName);
        switch (this.activeName) {
          case 'todo':
            if (this.$refs.todoRef) {
              this.$refs.todoRef.getList();
            }
            break;
          case 'finished':
            if (this.$refs.finishedRef) {
              this.$refs.finishedRef.getList();
            }
            break;
          case 'own':
            if (this.$refs.ownRef) {
              this.$refs.ownRef.getList();
            }
            break;
          case 'copy':
            if (this.$refs.copyRef) {
              this.$refs.copyRef.getList();
            }
            break;
          default:
            break;
        }
      });
    }
  }
};
</script>

<style scoped>
.header img {
  margin-right: 30px;
  cursor: pointer;
  width: 160px;
}

.works:nth-child(2n-1) {
  background: #f5f5f5;
}
</style>
